<template>
  <div id="private">
    <app-header></app-header>
    <div class="auto1200 private-box">
      <div class="private-lf">
        <div class="user-nav">
          <div class="portrait-box">
            <div class="poto-box">
              <div class="portrait-poto bg_cover" :style="{backgroundImage: 'url('+userInfo.avatar+')'}">
                <img :src="userInfo.avatar" alt="">
              </div>
            </div>
            <div class="portrait-dec" v-if="userInfo">
              <span>欢迎您</span>
              <span>{{userInfo.email}}</span>
            </div>
          </div>
          <div class="nav-list">
            <li :class="activeNav==='assets'?'active':''" @click="handleJump('assets')">我的资产</li>
            <li :class="activeNav==='detail'?'active':''" @click="handleJump('detail')">流水明细</li>
            <li :class="activeNav==='profits'?'active':''" @click="handleJump('profits')">我的分红</li>
          </div>
        </div>
      </div>
      <div class="private-rg">
        <div class="private-header">
          <ul class="ranking">
            <li>
              <label for="">累计分红金额</label>
              <span v-if="listData">{{listData.total}}ETH</span>
            </li>
            <li class="padd-lf">
              <label for="">累计排名</label>
              <span v-if="listData">{{listData.totalRank}}</span>
            </li>
            <li>
              <label for="">昨日分红金额</label>
              <span v-if="listData">{{listData.yesterday}}ETH</span>
            </li>
            <li class="padd-lf">
              <label for="">昨日排名</label>
              <span v-if="listData">{{listData.yesterdayRank}}</span>
            </li>
          </ul>
          <p>分红比例：分红比例是指平台盈利总额中拿出多少比例分红，每周递减如下</p>
          <ul class="cycle">
            <li v-if="dividendruleData&&dividendruleData.length>0" v-for="(item,index) in dividendruleData" :key="index" :class="item.hover?'active':''">
              <div>
                <span>{{item.title}} {{item.rate}}</span>
              </div>
              <i class="iconfont">&#xe639;</i>
            </li>
          </ul>
        </div>
        <div class="private-main">
          <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import header from '@/components/header/header'
  import Api from '@/axios/api/api'

  export default {
    name: 'private-page',
    data() {
      return {
        activeNav: 'assets',
        listData: null,
        dividendruleData: []
      }
    },
    components: {
      'app-header': header
    },
    computed: {
      userInfo() {
        return this.$store.state.user.userInfo
      }
    },
    created() {
      let currentRoute = this.$route.path
      this.activeNav = currentRoute.replace('/', '')
    },
    watch: {
      $route(to, from) {
        let currentRoute = to.path
        this.activeNav = currentRoute.replace('/', '')
      }
    },
    methods: {
      getHeaderdata() {
        Api.getPrivatehead().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.listData = result.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      getDividendruledata() {
        Api.getDividendrule().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.dividendruleData = result.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      handleJump(index) {
        this.activeNav = index
        this.$router.push({
          path: '/' + index
        })
      }
    },
    mounted() {
      this.getHeaderdata()
      this.getDividendruledata()
    }
  }
</script>

<style lang="less" scoped>
  #private {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    padding-bottom: 78px;
    .private-box {
      position: relative;
      width: 1200px;
      height: auto;
      min-height: 650px;
      display: block;
      padding-left: 280px;
      box-sizing: border-box;
      .private-lf {
        position: absolute;
        left: 0;
        top: 0;
        width: 250px;
        height: 100%;
        .user-nav {
          position: relative;
          width: 100%;
          height: 100%;
          display: block;
          padding-top: 296px;
          box-sizing: border-box;
          .portrait-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 266px;
            background: #8638FD;
            box-shadow: 2px 2px 10px 0 rgba(219, 217, 223, 0.50);
            padding: 44px 0;
            box-sizing: border-box;
            text-align: center;
            .poto-box {
              position: relative;
              width: 100%;
              height: 100px;
              display: block;
              overflow: hidden;
              margin-bottom: 20px;
              .portrait-poto {
                position: absolute;
                left: 0;
                right: 0;
                margin: auto auto;
                width: 100px;
                height: 100px;
                background: #FFFFFF;
                border-radius: 50%;
                display: block;
                overflow: hidden;
                > img {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  margin: auto auto;
                  max-height: 100%;
                  max-width: 100%;
                  display: block;
                  overflow: hidden;
                }
              }
            }
            .portrait-dec {
              width: 100%;
              height: auto;
              line-height: 30px;
              display: block;
              overflow: hidden;
              font-family: PingFangSC-Semibold;
              font-size: 20px;
              color: #FFFFFF;
              text-align: center;
              span {
                width: 100%;
                height: 30px;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

          }
          .nav-list {
            width: 100%;
            height: 100%;
            display: block;
            background: #FFFFFF;
            box-shadow: 2px 2px 10px 0 rgba(219, 217, 223, 0.50);
            > li {
              width: 100%;
              height: 100px;
              line-height: 100px;
              font-family: PingFangSC-Medium;
              font-size: 20px;
              color: #000000;
              text-align: center;
              border-bottom: 2px solid #D8D8D8;
              box-sizing: border-box;
              cursor: pointer;
            }
            > .active {
              color: #FFFFFF;
              background: #8638FD;
            }
          }
        }
      }
      .private-rg {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        padding-top: 296px;
        box-sizing: border-box;
        .private-header {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 266px;
          display: block;
          padding: 40px 40px 32px 40px;
          box-sizing: border-box;
          box-shadow: 2px 2px 10px 0 rgba(219, 217, 223, 0.50);
          > p {
            width: 100%;
            height: auto;
            line-height: 22px;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #000000;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .ranking {
            width: 100%;
            height: 88px;
            display: block;
            overflow: hidden;
            > li {
              width: 25%;
              height: 88px;
              float: left;
              > label {
                width: 100%;
                height: 26px;
                line-height: 26px;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-family: PingFangSC-Regular;
                font-size: 18px;
                color: #000000;
              }
              > span {
                width: 100%;
                height: 40px;
                line-height: 40px;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-family: PingFangSC-Semibold;
                font-size: 28px;
                color: #7B52F8;
                font-weight: bold;
              }
            }
            .padd-lf {
              padding-left: 8%;
              box-sizing: border-box;
            }
          }
          .cycle {
            width: 100%;
            height: auto;
            display: block;
            overflow: hidden;
            margin-top: 20px;
            > li {
              width: 144px;
              height: 54px;
              float: left;
              > div {
                width: 120px;
                height: 54px;
                background: #FFFFFF;
                border: 1px solid #8638FD;
                border-radius: 20px;
                text-align: center;
                box-sizing: border-box;
                float: left;
                > span {
                  width: 120px;
                  height: 54px;
                  text-align: center;
                  box-sizing: border-box;
                  display: table-cell;
                  vertical-align: middle;
                  ont-family: PingFangSC-Regular;
                  font-size: 16px;
                  color: #000000;
                }
              }

              > i {
                width: 24px;
                color: #979797;
                font-size: 24px;
                line-height: 54px;
                display: inline-block;
                overflow: hidden;
                float: left;
              }
              &:last-child {
                width: 120px;

                > i {
                  width: 0;
                  color: #979797;
                  font-size: 24px;
                  line-height: 54px;
                  display: none;
                  overflow: hidden;
                  float: left;
                }
              }
            }
            > .active {

              > div {
                background: #8638FD;
                border-radius: 20px;
                color: #FFFFFF;
                > span {
                  color: #FFFFFF;
                }
              }
            }
          }
        }
        .private-main {
          width: 100%;
          min-height: 200px;
          height: auto;
          display: block;
          box-shadow: 2px 2px 10px 0 rgba(219, 217, 223, 0.50);
        }
      }
    }
  }
</style>
